<template>
    <div class="animated fadeIn">
        <Row style="text-align: right">
            <Date-picker type="daterange" :options="options1" placement="bottom-end" placeholder="选择日期" style="width: 200px" v-model="date"></Date-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;按</span>
            <Select v-model="findType" style="width:80px;text-align: left">
                <Option v-for="item in findTypeList" :value="item.type" :key="item">{{item.name}}</Option>
            </Select>
            <span>查看&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <i-button type="info" @click="find()" style="background: #64bec2">搜索</i-button>
        </Row>


        <Row type="flex" justify="space-between" class="code-row-bg" style="margin-top: 30px">
            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel purple">
                <div class="state-value">
                    <div class="value">
                        总发货码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel red">
                <div class="state-value">
                    <div class="value">
                        总退货码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel pink">
                <div class="state-value">
                    <div class="value">
                        总净发码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel green">
                <div class="state-value">
                    <div class="value">
                        总发货数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel blue">
                <div class="state-value">
                    <div class="value">
                        总退货数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel mauve">
                <div class="state-value">
                    <div class="value">
                        总净发数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>
        </Row>

        <Row :gutter="16" style="margin-top:30px">
            <Col :lg="24" :md="24" :sm="24" :xs="24">
            <div class="title-label">个人销量趋势图</div>
            <dash-trend-chart></dash-trend-chart>
            </Col>
        </Row>

        <Row :gutter="16" style="margin-top:30px">
            <Col :lg="24" :md="24" :sm="24" :xs="24">
            <div class="title-label">个人销售明细表</div>
            <div style="background: #fff;padding: 30px 20px">
                <i-table :columns="columns8" :data="data7" size="small" ref="table"></i-table>
                <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                            align-items: center;
                            justify-content: center;background: rgba(210, 216, 222, 0.5);" v-if="list_loadding">
                    <Spin size="large"></Spin>
                    <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
                </div>
                <br>
                <Page :total="100" @on-change="change" show-elevator></Page>
                <br>
                <i-button type="primary" size="large" @click="exportData()"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
            </div>
            </Col>
        </Row>
    </div>
</template>

<script>
    import DashTrendChart from './charts/DashTrendChart';

    export default {
        components:{DashTrendChart},
        data() {
            return {
                findType:1,
                findTypeList:[
                    {
                        type:1,
                        name:'毛利'
                    },{
                        type:2,
                        name:'净发'
                    },{
                        type:3,
                        name:'码洋'
                    },
                ],
                options1: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                date: "",
                list_loadding: false,
                columns8: [
                    {
                        "title": "电影名称",
                        "key": "title",
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        "title": "原名",
                        "key": "original_title",
                    },
                    {
                        "title": "剧照",
                        "key": 'images',
//                        render: function (h, params) {
//                            return h('div', [
//                                h('img', {
//                                    attrs: {
//                                        src: params.row.images.small
//                                    }
//                                }),
//                            ]);
//                        }
                    }
                ],
                data7: []
            }
        },
        methods: {
            exportData() {
                this.$refs.table.exportCsv({
                    filename: '原始数据'
                });
            },
            change(page) {
                console.log(page,"跳转");

                this.list_loadding = true;
                const vue = this;
                this.list_loadding = true;
                setTimeout(function () {
                    vue.list_loadding = false;
                }, 2000)
            },
            find(){
                if(this.date.length === 0  || this.date[0] === null){
                    this.$Message.error("请选择时间区间")
                }else {
                    this.$Message.success("搜索成功")
                }
            }
        },
        mounted(){
//            this.list_loadding = true;
//            this.axios({
//                url: '/api/v2/movie/in_theaters',
//                method:'get'
//            }).then((res)=>{
//                this.data7 = res.data.subjects;
//                this.list_loadding = false;
//                console.log(res.data.subjects);
//            })
        }
    }
</script>

<style scoped>
    .code-row-bg {
        color: #fff;
    }
    .state-value .value {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px
    }
    .state-value .title {
        font-size: 14px
    }
    .state-value {
        width: 100%;
        display: inline-block;
    }
    .panel {
        border-radius: 4px;
        padding: 20px 20px;
    }
    .panel.purple {
        background: #6a8abe;
    }
    .panel.red {
        background-color: #fc8675;
    }
    .panel.green {
        background: #4acacb;
    }
    .panel.pink {
        background: #9587cb;
    }
    .panel.blue {
        background: #4b9ccb;
    }
    .panel.mauve {
        background: #bd89d6;
    }
    .staff_progress p {
        margin: 0
    }
    .animated {
        background-color: #eff0f4
    }
    h4 {
        margin: 12px;
    }
    .title-label{
        padding: 15px 40px;
        background: #fff;
        font-size: 1.5rem;
        display: inline-block;
    }
</style>


